<template>
  <div>
    <el-empty
      v-if="articles.length == 0"
      description="没有点赞任何帖子"
    ></el-empty>
    <ul>
      <li v-for="article in articles" :key="article.articleId" class="inv-item">
        <div class="hd">
          <img class="inv-img fl" :src="article.avatarUrl" alt="" />
          <span class="fl">{{ article.author }}</span>
          <div class="fl clearfix" v-show="1" style="line-height: 40px">
            <img
              v-if="article.authorIdentity == 1"
              class="fl"
              src="@/assets/认证.png"
              style="width: 20px; margin: 10px"
              alt=""
            />
          </div>
          <span class="time fl">{{ article.postTime }}</span>
          <span
            class="classify fl"
            v-for="eachTag in article.tag"
            :key="eachTag"
            >{{ eachTag }}</span
          >
        </div>
        <div class="bd">
          <router-link :to="'/lookpost/' + article.articleId"
            ><h3>{{ article.title }}</h3></router-link
          >
          <p>{{ article.summary }}</p>
        </div>
        <div class="fd">
          <li class="fl fd-item">浏览量{{ article.readCount }}</li>
          <li class="fl fd-item">评论{{ article.commentCount }}</li>
          <li class="fl fd-item">点赞数{{ article.goodCount }}</li>
          <li class="fl fd-item"><a href="#">编辑</a></li>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import personApi from "@/api/personApi";
import userMessageApi from "@/api/userMessageApi";
export default {
  name: "mypost",
  data() {
    return {
      userInfo: {},
      articles: [],
    };
  },
  created() {
    this.getPersonInfo();
    this.getLikeArticle();
  },
  methods: {
    getPersonInfo() {
      personApi.getPersonInfo().then((response) => {
        this.userInfo = response.data[0];
      });
    },
    getLikeArticle() {
      userMessageApi.getLikeArticle().then((response) => {
        this.articles = response.data;
        for (var i = 0; i < this.articles.length; i++) {
          this.articles[i].tag = this.articles[i].tag.split(",");
        }
      });
    },
  },
};
</script>

<style scoped>
/*具体帖子*/
.inv-item {
  height: 150px;
  /* background: pink; */
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  margin: 10px;
  padding: 5px 0;
}
/*帖子头部*/
.inv-item .hd {
  height: 40px;
  line-height: 40px;
}
.inv-item .hd span {
  height: 16px;
  line-height: 16px;
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  margin: 12px 0;
  padding: 0 8px;
}
.inv-img {
  height: 40px;
  width: 40px;
  border-radius: 20px;
}
/*帖子body*/
.inv-item .bd {
  margin: 10px 0;
}
.fd-item {
  margin-right: 20px;
}
</style>
